﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Sell_1" MasterPageFile="~/MasterPage.master" %>

<%@ OutputCache Duration="60" VaryByParam="*" %>
<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
<asp:Content ID="header" ContentPlaceHolderID="HeaderStyle" runat="server">
    <style type="text/css">
        .fn {
            margin: 0 auto;
            width: 100%;
            padding-left: 60px;
            position: relative;
        }

            .fn p {
                margin: 0 auto;
            }

            .fn .face {
                position: absolute;
                left: 0px;
                width: 60px;
            }

            .fn .line {
                border-top: 1px dashed #ff6a00;
                padding-top: 5px;
            }

                .fn .line p {
                    color: #ff0000;
                }

        #imgcode {
            cursor: pointer;
        }
        #message {
        display:none;
        }
    </style>
</asp:Content>
<asp:Content ID="main" ContentPlaceHolderID="main" runat="server">
    <div class="panel panel-primary">
        <div class="panel-heading" style="padding: 5px;">
            <ol class="breadcrumb" style="margin: 0px;">
                <li><a href="Default.aspx">首页</a></li>
                <li class="active">留言板</li>
            </ol>
        </div>
        <div class="panel-body">
            <div style="font-family: 'Microsoft YaHei'; font-size: xx-large; float: left;">留言板</div>
            <h1 style="font-family: 'Microsoft YaHei'; font-size: small; float: left; margin-left: 40px;">共有<%=Count %>条留言</h1>
            <div style="float: right; width: 150px;">
                <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-success  btn-block">留言</button>
            </div>
            <div style="clear: both;"></div>
            <table class="table table-hover">
                <asp:Repeater ID="Repeater1" runat="server">
                    <ItemTemplate>
                        <tr>
                            <td>
                                <div class="fn" data-toggle="tooltip" data-placement="left" title="<%#Eval("IPforAddress") %>">
                                    <div class="face"><a><%#Eval("NikeName") %>：</a></div>
                                    <p><%#Eval("Content") %></p>
                                    <p class="text-right"><%#Eval("MTime") %></p>
                                    <div class="alert alert-success" role="alert">
                                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                                        <span class="sr-only">提示</span>
                                        回复：<%#Eval("Reply") %>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>
            </table>
            <webdiyer:AspNetPager ID="AspNetPager1" CurrentPageButtonClass="" runat="server"
                FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PrevPageText="上一页" ShowCustomInfoSection="Left"
                showinputbox="Never" OnPageChanged="AspNetPager1_PageChanged" CustomInfoTextAlign="Left" LayoutType="Table" UrlPaging="True" CustomInfoHTML="总页 %CurrentPageIndex% / %PageCount%">
            </webdiyer:AspNetPager>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">留言板</h4>
                    </div>
                    <div class="modal-body">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="input-group" style="margin: 5px auto;">
                                    <span class="input-group-addon">用户名：</span>
                                    <input type="text" class="form-control" id="UserName" maxlength="6" placeholder="用户名" data-toggle="tooltip" data-placement="top" title="请填写回访的用户名，最多能输5个汉字" />
                                </div>
                                <div class="input-group">
                                    <span class="input-group-addon">手机号：</span>
                                    <input type="text" class="form-control" id="PhoneNum" placeholder="手机号" maxlength="11" data-toggle="tooltip" data-placement="top" title="请填写真实手机号，方便我们与您联系，该手机号不会对外公开" />
                                </div>
                                <h5><strong class="text-danger">注意：留言仅表达个人看法，并不表明本站同意或者证实其描述。</strong></h5>
                                <textarea style="margin: 5px auto;" id="Content" class="form-control" rows="3" placeholder="内容" data-toggle="tooltip" data-placement="top" title="请您简要描述您的案件情况"></textarea>
                                <div style="width: 100%; height: 40px;">
                                    <div style="float: right;">
                                        <input type="text" class="form-control" id="yazhengma" maxlength="4" placeholder="验证码" />
                                    </div>
                                    <div style="float: right;">
                                        <img id="imgcode" alt="code" src="ImgCode.aspx" data-toggle="tooltip" data-placement="left" title="点击刷新验证码" />
                                    </div>

                                    <div style="clear: both;"></div>
                                </div>
                            </div>
                            <div class="panel-footer">
                                <div id="message" class="alert" role="alert">
                                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                                    <span class="sr-only">提示</span>
                                    消息已发出，我们会尽快回复您。
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" id="btn_Publish" class="btn btn-primary">发布</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</asp:Content>
<asp:Content ID="js" ContentPlaceHolderID="footerJS" runat="server">
    <script type="text/javascript">
        $(document).ready(function () {
            var UserName, PhoneNum, Content, Code;
            $("#imgcode").click(function () {
                $(this).attr({ src: "../Sell/ImgCode.aspx?" + Math.random() });
            });
            $('[data-toggle="tooltip"]').tooltip();
            $('#btn_Publish').click(function () {
                UserName = $("#UserName").val();
                PhoneNum = $("#PhoneNum").val();
                Content = $("#Content").val();
                Code = $('#yazhengma').val();
                if (UserName != "" && PhoneNum != "" && Content != "" && Code != "") {
                    fabu(UserName, PhoneNum, Content, Code);
                }
                else {
                    alert("请按照要求填写信息！");
                }
            });
            $("#PhoneNum").keyup(function () {
                $(this).keyup(function () {
                    $(this).val($(this).val().replace(/\D|^0/g, ''));
                }).bind("paste", function () {  //CTR+V事件处理    
                    $(this).val($(this).val().replace(/\D|^0/g, ''));
                }).css("ime-mode", "disabled"); //CSS设置输入法不可用  

            });
            $('#myModal').on('hidden.bs.modal', function (e) {
                $('#message').css({ 'display': 'none' }).empty();
                $("#imgcode").attr({ src: "../Sell/ImgCode.aspx?" + Math.random() });
            });
            $(".navbar-collapse").find("li").eq(7).addClass("active");
            $(".navbar-collapse").find("li").eq(0).removeClass("active");
        });
        function fabu(UserName, PhoneNum, Content, Code) {
            $.ajax({
                type: "POST",
                url: "ajax/fabu.ashx",
                data: { 'UserName': UserName, 'PhoneNum': PhoneNum, 'Content': Content, 'Code': Code },
                datatype: "text/json",
                beforeSend: function () {
                    if ($('#message').hasClass('alert-danger')) {
                        $('#message').removeClass('alert-danger').addClass('alert-danger');
                    }
                    else {
                        $('#message').addClass('alert-danger');
                    }
                    $('#message').css({ 'display': 'block' }).text('消息发布中...');
                },
                success: function (msg) {
                    if (msg == "1") {
                        $('#message').removeClass("alert-danger").addClass("alert-success").text('消息已发出，我们会尽快回复您。');
                    }
                    else {
                        $('#message').removeClass('alert-success').addClass('alert-danger').text('发送失败！');
                        $("#imgcode").attr({ src: "../Sell/ImgCode.aspx?" + Math.random() });
                    }
                },
                complete: function (data) {
                   
                }
            });
        }
    </script>
</asp:Content>
